import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

/*
 * @class ButtomNav
 * @author: ZhongWb
 * @date: 2019/12/18 15:17
 * @description 底部导航
 **/
class ButtomNav extends StatefulWidget {
  int defPage;//默认页
  double iconSize;//图标大小
  Color iconColor;//未选中图标颜色
  Color activeIconColor;//选中后图标颜色
  Map<String,Object> data;//数据源
  ValueChanged onIndex;//回调索引
  double fontSize;//文本字体大小
  Color textColor;//未选中文本颜色
  Color activeColor;//选中颜色
  Color bgColor;//背景颜色
  int countAct;//第几个按钮显示 消息数量 从0开始
  int countNum;//计数
  Color qpBgColor;//气泡颜色
  Color qpFontColor;//气泡文本颜色
  double qpFontSize;//气泡文本大小
  double circular;//气泡圆角
  ButtomNav({
    this.qpBgColor:Colors.red,
    this.qpFontColor:Colors.white,
    this.qpFontSize:12.0,
    this.circular:10,
    this.countAct:-1,//默认不显示
    this.countNum:0,
    this.activeColor,
    this.textColor,
    this.onIndex,
    this.data,
    this.iconSize,
    this.fontSize,
    this.defPage,
    this.iconColor,
    this.activeIconColor,
    this.bgColor
  });

  @override
  _ButtomNavState createState() => _ButtomNavState();
}

class _ButtomNavState extends State<ButtomNav> {
  int indexPage = 2;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    if(widget.defPage != null) {
      indexPage = widget.defPage;
    }
  }
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        height: 56,
        color: widget.bgColor ?? Color(0xfff4f4f4),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: _item(widget.data),
        ),
      ),
    );
  }

  List<Widget> _item(Map<String,Object> data){
    List<String> a = [];
    List<Object> b = [];

    if(data.containsKey("name")){
      a = data["name"];
    }
    if(data.containsKey("icon")){
      b = data["icon"];
    }

    List<Widget> item = [];

    for(int i=0;i<a.length;i++){
      item.add(
          Material(
            child: Ink(
              child: InkWell(
                onTap:(){
                  setState(() {
                    indexPage = i;
                  });
                  widget.onIndex(i);
                } ,
                child: Stack(
                  children: <Widget>[
                    Container(
                      height: 56,
                      alignment: Alignment.center,
                      width: MediaQuery.of(context).size.width / a.length,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          data["iconType"]=="img" ? Image.asset(b[i],width: 30,height: 30,fit: BoxFit.cover,)
                              :Icon(b[i],color:indexPage==i ? widget.activeIconColor ?? Color(0xff3D7ADD) :widget.iconColor ??  Color(0xff999999),),
                          Text(a[i],style: TextStyle(fontSize: widget.fontSize ?? 16,color:indexPage==i ? widget.activeColor ?? Color(0xff3D7ADD): widget.textColor ?? Color(0xff999999),),),
                        ],
                      ),
                    ),
                    widget.countAct==i && widget.countNum !=0 ?Positioned(right: widget.countNum<10 ? 20: widget.countNum<=99 ? 10:0,top: 3,child: Container(width: widget.countNum<10?18 : widget.countNum<=99 ? 25 : 35,height: 18,alignment: Alignment.center,child: Text("${widget.countNum>99?99.toString()+'+':widget.countNum.toString()}",style: TextStyle(color: widget.qpFontColor,fontSize: widget.qpFontSize),),decoration: BoxDecoration(color: widget.qpBgColor,borderRadius: BorderRadius.circular(widget.circular)),)):Container()
                  ],
                ),
              ),
            ),
          ),

      );
    }
    return item;
  }
}

